<template>
	<div class="audit-content detailBoxStyle">
		<!-- 会员账号信息 -->
		<div
			class="block mb"
			v-loading="loading"
			element-loading-spinner="el-icon-loading"
		>
			<p class="name">{{ $t('funds.fund_audit.title_2') }}</p>
			<div class="block-content">
				<el-table
					border
					size="mini"
					:data="[1]"
					style="width: 100%"
					:header-cell-style="getRowClass"
				>
					<el-table-column
						align="center"
						:label="`${$t('common.member_number')}`"
						prop="userName"
					>
						<template>
							{{ accountInfo.userName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="`${$t('funds.fund_audit.direct_up_proxy')}`"
						prop="parentProxyName"
					>
						<template>
							{{ accountInfo.parentProxyAccount || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="`${$t('common.belong_merchant')}`"
						prop="merchantName"
					>
						<template>
							{{ accountInfo.merchantName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="accountStatus"
						align="center"
						:label="$t('common.account_status')"
						:min-width="getWidth(100)"
					>
						<template>
							<span
								v-if="accountInfo.loginLockStatus === 1"
								class="disableRgba"
							>
								{{ $t('common.login_lock_status') }}
							</span>
							<span
								v-if="accountInfo.accountLockStatus === 1"
								class="deleteRgba"
							>
								{{ $t('common.account_lock_status') }}
							</span>
							<span
								v-if="
									accountInfo.loginLockStatus === 0 &&
										accountInfo.accountLockStatus === 0
								"
								class="normalRgba"
							>
								{{ $t('common.account_status_normal') }}
							</span>
						</template>
					</el-table-column>
					<el-table-column
						align="center"
						:label="$t('funds.fund_audit.register_time')"
					>
						<template>
							{{ accountInfo.registerDate || '-' }}
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<!-- 应收返水统计 -->
		<div class="block mb">
			<MemberBounsSummary :detailData="detailData"></MemberBounsSummary>
		</div>
		<!-- 个人返水明细 -->
		<div class="block mb">
			<MemberBounsDetail :detailData="detailData"></MemberBounsDetail>
		</div>
		<!-- 审核记录 -->
		<template v-if="isShowAudit">
			<div class="block mb" v-if="firstAudit.lockOperator">
				<p class="name">{{ $t('funds.fund_audit.audit_info') }}</p>
				<div class="block-content">
					<el-row :gutter="20">
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_user_1') }}:
							{{ firstAudit.lockOperator || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_time_1') }}:
							{{ firstAudit.auditTime || '-' }}
						</el-col>
						<el-col :span="12">
							{{ $t('funds.fund_audit.audit_remark_1') }}:
							<span class="word_break">
								{{ firstAudit.auditDesc || '-' }}
							</span>
						</el-col>
					</el-row>

					<el-row v-if="secondAudit.lockOperator" :gutter="20">
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_user_2') }}:
							{{ secondAudit.lockOperator || '-' }}
						</el-col>
						<el-col :span="6">
							{{ $t('funds.fund_audit.audit_time_2') }}:
							{{ secondAudit.auditTime || '-' }}
						</el-col>
						<el-col :span="12">
							{{ $t('funds.fund_audit.audit_remark_2') }}:
							<span class="word_break">
								{{ secondAudit.auditDesc || '-' }}
							</span>
						</el-col>
					</el-row>
				</div>
			</div>
		</template>
	</div>
</template>

<script>
import list from '@/mixins/list'
import MemberBounsDetail from '@/components/Funds/MemberBounsDetail'
import MemberBounsSummary from '@/components/Funds/MemberBounsSummary'
export default {
	components: { MemberBounsDetail, MemberBounsSummary },
	mixins: [list],
	props: {
		detailData: {
			type: Object,
			required: true
		},
		isShowAudit: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			loading: false,
			accountInfo: {}, // 审核账号信息
			firstAudit: {}, // 一审
			secondAudit: {} // 二审
		}
	},
	computed: {},
	created() {
		this.getMemberRebateAuditDetail()
	},
	mounted() {},
	methods: {
		// 返水审核详情-会员信息及审核信息
		async getMemberRebateAuditDetail() {
			this.accountInfo = {}
			this.firstAudit = {}
			this.secondAudit = {}
			const params = {
				id: this.detailData.id
			}
			this.loading = true
			await this.$api
				.getMemberRebateAuditDetailHeader(params)
				.then((res) => {
					this.accountInfo = res.data?.accountsResp || {}
					const auditList =
						res.data?.memberRebateAuditDetailList || []
					auditList.forEach((item) => {
						if (item.auditStep === 1) {
							// 一审
							this.firstAudit = item
						}
						if (item.auditStep === 2) {
							// 二审
							this.secondAudit = item
						}
					})
				})
				.catch(() => {})
				.finally(() => {
					this.loading = false
				})
		}
	}
}
</script>

<style lang="scss" scoped>
.audit-content {
	.block {
		padding: 20px 20px 20px 20px;
		.name {
			font-weight: 600;
		}
		.block-content {
			position: relative;
			width: 100%;
			margin-top: 10px;
			word-break: break-all;
		}
	}
	.mb {
		.el-col {
			min-height: 40px;
			margin-bottom: 10px;
		}
	}
}
</style>
